<template>
  <div class='userCard'>
    <!-- 上边 -->
    <ul class="userCard-top">
      <li class="title">
        <img :src="userMsgRef.avatar" alt="点击进入他的主页" @click="routerpath" class="imgtou">
        <div class="title-right">
          <p>{{ userMsgRef.nickname }}</p>
          <span class="age">
            码龄4年
          </span>
          <span>
            暂无认证
          </span>
        </div>
      </li>
      <li class="artices">
        <div class="dd">
          <p>91</p>
          <p>原创</p>
        </div>
        <div class="dd">
          <p>91</p>
          <p>周排名</p>
        </div>
        <div class="dd">
          <p>91</p>
          <p>总排名</p>
        </div>
        <div class="dd">
          <p>91</p>
          <p>访问</p>
        </div>
        <div class="dd">
          <p>3</p>
          <p>等级</p>
        </div>
      </li>
      <li class="fans">
        <div class="ff">
          <p>251</p>
          <p class="f2">
            积分
          </p>
        </div>
        <div class="ff">
          <p>251</p>
          <p class="f2">
            粉丝
          </p>
        </div>
        <div class="ff">
          <p>251</p>
          <p class="f2">
            获赞
          </p>
        </div>
        <div class="ff">
          <p>251</p>
          <p class="f2">
            评论
          </p>
        </div>
        <div class="ff">
          <p>251</p>
          <p class="f2">
            收藏
          </p>
        </div>
      </li>
      <li class="btn" v-if="!ifbenren">
        <button size="">私信</button>
        <button class="guanzhu" v-if="!showattentionRef" @click="attentionF">关注</button>
        <button class="guanzhu2" v-if="showattentionRef" @click="attentionF">已关注</button>
      </li>
    </ul>
    <!-- 下边 -->
    <div class="userCard-bottom">
      <el-input placeholder="搜博主文章" suffix-icon="el-icon-search"></el-input>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { attentionAPI, getUserByIdAPI, unattentionAPI } from '../../api/userAPI'
import { succ1, succ2 } from '../../tool/ElMessageAny'
import UseLocalStorage from '../../tool/UseLocalStorage'

export default defineComponent({
  name: '',
  setup () {
    // 截取路由参数
    const route = useRoute()
    const router = useRouter()
    const userid = route.query.userID

    // 获取用户信息
    const userMsgRef = ref<any>({})
    const getusermsg = async () => {
      const res = await getUserByIdAPI(userid)
      userMsgRef.value = res.data.data
    }
    // 跳转路由
    const routerpath = () => {
      router.push({
        name: 'my',
        query: {
          userID: userid,
          type: 'blog'
        }
      })
    }
    // 本地存储
    const { localStorageId } = UseLocalStorage()
    // 判断是否是本人查看自己文章
    const ifbenren = ref<boolean>(route.query.userID == localStorageId)
    // 是否已经关注
    const showattentionRef = ref<boolean>(false)
    // 关注函数
    const attentionF = async () => {
      if(!showattentionRef.value) {
        const res = await attentionAPI(userid)
        console.log(res);
        succ2('关注成功')
        showattentionRef.value = true
        return
      }
      if(showattentionRef.value) {
        const res = await unattentionAPI(userid)
        console.log(res);
        succ2('取消关注成功')
        showattentionRef.value = false
        return
      }
    }

    onMounted(() => {
      getusermsg()
    })
    return {
      userMsgRef,
      routerpath,
      ifbenren,
      attentionF,
      showattentionRef
    }
  }
})
</script>

<style lang='scss' scoped>
  .userCard{
    width: 300px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 0px rgb(223, 223, 223);
  }
  .userCard-top{
    
    background-color: white;
    padding: 20px;
    li{
      padding-bottom: 20px;
    }
  }
  .title{
    display: flex;
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .title-right{
      margin-left: 10px;
      p{
        font-size: 14px;
        color: #414141;
      }
      span{
        font-size: 13px;
      }
      .age{
        font-size: 12px;
        color: #9f9f9f;
      }
    }
  }
  .artices{
    border-bottom: 1px solid rgb(224, 224, 224);
    display: flex;
    justify-content: space-between;
    color: #505050;
    .dd{
      text-align: center;
    }
  }
  .fans{
    display: flex;
    justify-content: space-between;
    color: #505050;
    margin-top: 20px;
    .ff{
      .f2{
        color: rgb(168, 168, 168);
      }
    }
  }
  .btn{
    display: flex;
    justify-content: space-between;
    padding-bottom: 0px !important;
    button{
      width: 120px;
      height: 30px;
      border-radius: 30px;
      border: 1px solid rgb(255, 115, 0);
      color: rgb(255, 115, 0);
      background-color: #fff;
    }
    .guanzhu{
      color: #fff;
      background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
      border: 0;
    }
    .guanzhu2{
      color: #fff;
      background-color: #9f9f9f;
      border: 0;
    }
  }

  .userCard-bottom{
    margin-top: 10px;
  }
  .imgtou{
    cursor: pointer;
  }
</style>
